<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9" /><!-- 使用IE8 -->
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_hader" th:content="${_csrf.headerName}"/>
    <link th:href="@{css/imgs/favicon.ico}" type="image/x-icon" rel="shortcut icon" />
    <title>屋托邦装修服务管理系统</title>
    <link th:href="@{css/common.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{css/login.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{js/jquery.min.js}"></script>
    <script th:src="@{js/login.js}"></script>
    <script language="JavaScript">
        if (window != top)
            top.location.href = location.href;
    </script>
</head>
<body>
<script>
    $(function(){
        var timebbb;
        $('#userName').on('focus',function(){
            timebbb = setInterval(bbb,20);
        })
        $('#userName').on('blur',function(){
            clearInterval(timebbb);
        })
        function bbb(){
            if(!$('#password').val()==''){
                $('#bbbb').hide();
            }
        }

    })
</script>
<div class="top">
    <div class="top-logo">
        <img src="css/imgs/log_02.jpg"/>
    </div>
</div>
<div class="main">
    <img class="main-pic" src="css/imgs/log_04.jpg"/>
    <div class="log con-log">
        <div class="log-1">
            用户登录
        </div>
        <div class="log-2">
            <form th:action="@{/login}" method="post" style="position:relative;" onsubmit=" return validUserNameAndPassword()">
                <p class="error" id="loginError"></p>
                <input class="log-margintop" type="text" name="username" id="userName" onfocus="if($(this).val()=='请输入手机号码'){$(this).val('')}" onblur="if($(this).val()==''){$(this).val('请输入手机号码')};" value="请输入手机号码" />
                <input type="password" name="password" id="password" onfocus="if($(this).val()==''){$('#bbbb').hide()}" onblur="if($(this).val()==''){$('#bbbb').show()}" value="" />
                <label id="bbbb" style="position:absolute;z-index:1;left:0;top:0;left: 9px;top: 85px;    color: #666;
    font-family: '微软雅黑';
    font-size: 16px;" onclick="$('#password').focus()">请输入密码</label>
                <p>
                    <a class="cli-login" href="javascript:;">新用户注册</a>
                    <a class="cli-pass log-left" href="javascript:;">忘记密码？</a>
                </p>
                <input class="log-sub" type="submit" id="login" value="登录" />
            </form>
        </div>
        <div class="log-3">

        </div>
        <div class="log-er">
            <img src="css/imgs/log_22.jpg"/>
        </div>
    </div>
    <div class="log con-pass" style="display:none">
        <div class="log-1">
            找回密码
        </div>
        <form action="#" method="post">
            <div class="log-2">
                <p class="error" id="findError"></p>
                <input class="log-margintop" type="text" id="userMobile" name="phoneNumber"  autocomplete="off" onfocus="if($(this).val()=='请输入手机号码'){$(this).val('')};" onblur="if($(this).val()==''){$(this).val('请输入手机号码')}validUserMobile()" value="请输入手机号码" />
                <input class="log-yan" type="text" id="userSmsCode" name="smsCode" onfocus="if($(this).val()=='请输入验证码'){$(this).val('')}" onblur="if($(this).val()==''){$(this).val('请输入验证码')}" value="请输入验证码" />
                <i class="log-yy1" type="bottom" >获取验证码</i>
                <p>

                </p>
                <input class="log-sub log-back" id="log-4-back" type="button" value="返回" />
                <input class="log-sub log-back cli-next" type="button"  value="下一步" id="nextbtn" />
            </div>
        </form>
        <div class="log-3">

        </div>
        <div class="log-er">
            <img src="css/imgs/log_22.jpg"/>
        </div>
    </div>
    <div class="log con-pass1" style="display:none">
        <div class="log-1">
            找回密码
        </div>
        <form action="">
            <div class="log-2">
                <p class="error" id="setError">请输入</p>
                <input class="log-margintop" type="password" placeholder="请输入新密码" id="setNew" name="pwd" />
                <input type="password" placeholder="请重新输入" id="againSet" />
                <p>

                </p>
                <input class="log-sub log-back" id="log-3-back" type="button" value="上一步" />
                <input class="log-sub log-back" type="button" value="确认" id="findpwd" />
            </div>
        </form>
        <div class="log-3">

        </div>
        <div class="log-er">
            <img src="css/imgs/log_22.jpg"/>
        </div>
    </div>
    <div class="log log-7" style="display:none">
        <div class="log-1">
            请选择您的从业类型
        </div>
        <div class="log-2 log-5">
            <p class="error">请选择从业类型</p>
            <div class="log-select">
                <ul>
                    <li class="log-she">
							<span>
								<i></i>
							</span>
                    </li>
                    <li class="log-jian">
							<span>
								<i></i>
							</span>
                    </li>
                    <li class="log-gong">
							<span>
								<i></i>
							</span>
                    </li>
                    <li class="log-cai">
							<span>
								<i></i>
							</span>
                    </li>
                </ul>
            </div>
            <input class="log-sub log-back" id="log-6-back" style="margin-left:53px;" type="button"  value="返回" />
            <input class="log-sub log-back" id="log-7-sure" type="button" value="下一步" />
        </div>
        <div class="log-3">

        </div>
    </div>
    <div class="log log-6" style="display:none">
        <div class="log-1">
            新用户注册
        </div>
        <div class="log-2 log-5">
            <form id="registForm" action="/register/register.action" method="post">
                <p class="error" id="regError">请输入手机号</p>
                <label class="log-margintop"><span>手机号：</span>
                    <input type="text" id="phoneNumber" name="phoneNumber"  value="" autocomplete="off" /></label>
                <label><span>验证码：</span>
                    <input class="log-yan" type="text" id="smsCode" name="smsCode" size="6" autocomplete="off" />
                    <i class="log-yy" type="bottom">获取验证码</i></label>
                <label><span>密码：</span>
                    <input type="password" id="pwd" name="pwd" autocomplete="off" /></label>
                <label><span>确认密码：</span>
                    <input type="password" id="repwd" name="repwd" /></label>
                <input type="hidden" name="type" id="type" />
                <p>
                    <input type="checkbox" id="agreement" name="agreenment" />
                    <a href="javascript:;" onclick="open_win()" >同意《屋托邦平台协议》</a>
                </p>
                <input class="log-sub log-back" id="log-5-back" style="margin-left:53px;" type="button" onclick="reset()" value="上一步" />
                <input class="log-sub log-back" type="button" id="registSubmit"  value="提交" />
            </form>
        </div>
        <div class="log-3">
        </div>
    </div>
</div>
<div class="log-foot">
    <div class="log-footer">
        <span class="log-weixin"></span>
        <span class="log-weibo"></span>
        <img style="display: none;" class="foot-weixin" src="css/imgs/er_04.png"/>
        <img style="display: none;" class="foot-weibo" src="css/imgs/er_03.png"/>
    </div>
</div>
<script type="text/javascript">
    // 	$("#login").on("click",function(){
    // 		$(".error").html("");
    // 	});
    /*<![CDATA[*/
    $("#registSubmit").on("click",function(){
        var isValid = true;
        if($(".log-she").is('.on')){
            $("#type").val("1");
        }else if($(".log-jian").is('.on')){
            $("#type").val("6");
        }else if($(".log-gong").is('.on')){
            $("#type").val("4");
        }else if($(".log-cai").is('.on')){
            $("#type").val("2");
        }
        if($("#smsCode").val()==null||$("#smsCode").val()==''){
            $(".error").html("验证码不能为空！");
            isValid=false;
        }
        var phoneNumber = $("#phoneNumber").val();
        if(!(/^1[3|4|7|5|8][0-9]\d{4,8}$/.test(phoneNumber))){
            $(".error").html("手机号格式不正确！");
            isValid = false;
        }
        if(!$("#agreement:checked").length){
            $(".error").html("未同意屋托邦平台协议！");
            isValid = false;
        }
        if($("#pwd").val().length > 18||$("#pwd").val().length < 6){
            $(".error").html("密码格式不正确！");
            isValid=false;
        }else if($("#pwd").val()!=$("#repwd").val()){
            $(".error").html("两次密码输入不一致！");
            $("#pwd").val("");
            $("#repwd").val("");
            isValid=false;
        }
        if(isValid){
            $(".error").html("");
            $.post("/register/register.action",{"phoneNumber":phoneNumber,"smsCode":$("#smsCode").val(),"pwd":$("#pwd").val(),"type":$("#type").val()},function(res){
                if(res){
                    if(res==2){
                        $(".error").html("短信验证码与手机号不匹配！");
                    }else if(res==0){
                        $("#loginError").html("注册成功，请登录！");
                        $(".log").hide();
                        $(".con-log").show();
                        $("#userName").val("");
                        $('#registForm')[0].reset();
                    }else if(res==3){
                        $(".error").html("该手机号已被注册！");
                    }
                }
            });
        }

    });
    // 短信验证码检查
    $("#nextbtn").on('click',function(){
        var isValid = true;
        var phoneNumber = $("#userMobile").val();
        var smsCode = $("#userSmsCode").val();
        if(phoneNumber==null){
            $("#findError").html("请输入手机号！");
            isValid = false;
        }
        if(smsCode==null){
            $("#findError").html("请输验证码！");
            isValid = false;
        }
        if(isValid){
            $.post('/sys/validaMobieAndSms.action',{'phoneNumber':phoneNumber,'smsCode':smsCode},function(res){
                res = JSON.parse(res);
                if(res.ok){
                    $('.log').hide();
                    $('.con-pass1').show();
                }else{
                    $("#findError").html(res.msg);
                }
            });
        }

    });
    // 新密码检测
    var newValid = false;
    $("#setNew").blur(function(){
        var num=$("#setNew").val().length;
        if(num < 6&&num > 0){
            $("#setError").html("密码太短");
        }
        else if(num > 18){
            $("#setError").html("密码太长了");
        }else if(num==0){
            $("#setError").html("密码不能为空");
        }else{
            $("#setError").html("");
            newValid = true;
        }
    }) ;
    // 重新输入的新密码是否一致
    var againValid = false;
    $("#againSet").blur(function(){
        var tmp=$("#setNew").val();
        var num=$("#againSet").val().length;
        if($("#againSet").val()!=tmp){
            $("#setError").html("两次输入密码不一致");
        }
        else{
            if(num>=6&&num <=18){
                $("#setError").html("");
                againValid = true;
            }
            if(num==0){
                $("#setError").html("密码不能为空");
            }
        }
    });
    // 设置新密码操作
    $("#findpwd").on('click',function(){
        var isValid = true;
        var newPass = $("#setNew").val();
        var againPass = $("#againSet").val();
        var newLength = $("#setNew").val().length;
        var againLength = $("#againSet").val().length;
        if(newLength==againLength && newLength==0 || newLength==0||againLength==0){
            $("#setError").html("请输入密码");
            isValid = false;
        }
        if(newValid && againValid && isValid){
            $.post('/sys/updatePwd.action',{'phoneNumber':$("#userMobile").val(),'smsCode':$("#userSmsCode").val(),'pwd':$("#setNew").val()},function(res){
                res = JSON.parse(res);
                if(res.ok){
                    alert(res.msg);
                    window.location.href="/logout";
                }else{
                    $("#setError").html(res.msg);
                }
            });
        }
    });
    //获取短信验证码
    var sta = true;
    $('.log-yy').click(function(){
        var phoneNumber = $("#phoneNumber").val();

        if(/^1[3|4|7|5|8][0-9]\d{4,8}$/.test(phoneNumber) && phoneNumber!=null && phoneNumber!=''){
            if(sta){
                sta = false;
            }else{
                return false;
            }
            $.get("/register/getSMS.action",{"phoneNumber":phoneNumber});
            $(this).addClass('on');
            $(this).html('获取验证码</br>(30s)');
            var i = 30;
            var timenum = setInterval(function(){
                if(i<=0){
                    $('.log-yy').html('获取验证码');
                    $('.log-yy').removeClass('on');
                    clearInterval(timenum);
                    sta = true;
                    return false;
                }
                i--;
                $('.log-yy').html('获取验证码</br>('+i+'s)');
            }, 1000);
        }else{
            $("#regError").html("手机号格式不正确");
            return false;
        }
    });
    var sta1 = true;
    $('.log-yy1').click(function(){
        var userMobile = $("#userMobile").val();
        if(/^1[3|4|7|5|8][0-9]\d{4,8}$/.test(userMobile) && userMobile!=null && userMobile!=''){
            if(sta1 ){
                sta1 = false;
            }else{
                return false;
            }
            $.get("/register/getSMS.action",{"phoneNumber":userMobile});
            $(this).addClass('on');
            $(this).html('获取验证码</br>(30s)');
            var i = 30;
            var timenum = setInterval(function(){
                if(i<=0){
                    $('.log-yy1').html('获取验证码');
                    $('.log-yy1').removeClass('on');
                    clearInterval(timenum);
                    sta1 = true;
                    return false;
                }
                i--;
                $('.log-yy1').html('获取验证码</br>('+i+'s)');
            }, 1000);
        }else{
            $("#findError").html("手机号格式不正确");
            return false;
        }
    })
    // 弹出协议
    function open_win()
    {
        var myWindow = window.open("/assets/login_regis/useragreement-utopSp.html","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=640, height=700");
        myWindow.moveBy(550,50);
    }
    function validUserMobile(){
        var userMobile = $("#userMobile").val();
        if(!(/^1[3|4|7|5|8][0-9]\d{4,8}$/.test(userMobile))){
            $("#findError").html("手机号格式不正确");
        }else{
            $("#findError").html("");
        }
    }
    function  validUserNameAndPassword() {
        var username = $("#userName").val();
        var password = $("#password").val();
        if(username=="" ||username.length==0 || username =="请输入手机号码" ){
            $("#loginError").html("用户名不能为空");
            return false;
        }
        if(password =="" ||password.length==0 ){
            $("#loginError").html("登录密码不能为空");
            return false;
        }
        return true;
    }
    /*]]>*/
</script>
</body>
</html>